<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/woker.css"/>
		<style type="text/css">
			
		</style>
	</head>
	
	<body>
		<!--头部-->
		<div id="base_top_bg" >
			<div class="base_top_navDiv">
				<div class="base_top_logo" onclick="location.href='index.html'"></div>
				
				<ul class="base_top_nav">
					<li class="w42" id="index_dl">登录</li>
					<li class="w40" id="index_tcdl" onclick="location.href='register.html'"></li>
					<li class="w40" onclick="location.href='shop.html'"></li>
					<li class="w56" id="base_gwc" >购物车</li>
					<li></li>
					<li class="w40"></li>
					<li class="w40"></li>
					<li class="w40"></li>
				</ul>
				<div id="base_dlcg"></div>

				<img class="base_weixin" src="img/index/index_weixin1.png" />
				<img class="base_weibo" src="img/index/index_weibo1.png" />
				<img class="base_weitao" src="img/index/index_weitao1.png" />
			</div>
		</div>
		<ul id="base_leftAdd_content">
			<li>
				<a href="news.html">资讯</a>
			</li>
			<li>
				<a href="join.html">加盟</a>
			</li>
			<li>
				<a href="job.html">纳贤</a>
			</li>
			<li>
				<a href="woker.html">匠人</a>
			</li>
			<li>
				<a href="cooperation.html">合作</a>
			</li>
			<li>
				<a href="actor.html">选角</a>
			</li>
			<li>
				<a href="media.html">媒体</a>
			</li>
		</ul>
		<div id="base_leftAdd">
			<span></span>
		</div>
		<!--模拟客服开始-->
		<div id="top"></div>
		<div id="main">
			<span id="base_guanbi"></span>
			<div id="txt">花笙记客服代表</div>
			<div id="show">
				<span class="show_span">很高兴为您服务！</span>
			</div>
			<input type="text" name="text" id="text" value="" />
			<input type="button" style="cursor: pointer;" id="send" value="发送" />
		</div>
		<!--模拟客服结束-->

		<div id="woker_msj_main">
			<!--弹出部分-->
			<div id="woker_msj_scend1">
				<div id="woker_msj_scend1_1">
					<ul class="coopcontent">
						<li style="height:150px;"><img style="width: 320px;height: 80px;" src="img/woker/woker_16.png" /><img class="gaunbi" src="img/job/job_30.png" /></li>
						<li><img src="img/woker/woker_11.png"/></li>
						<li><img src="img/woker/woker_1.png"/></li>
						<li><img src="img/woker/woker_15.png"/></li>
						<li><img src="img/woker/woker_12.png"/></li>
						<li style="height: 18px;">你好，<span id="woker_msj_zhiwei"></span>师！</li>
						<li><input type="text" placeholder="阁下姓名" class="jion_msj_inpcon" /></li>
						<li><input type="text" placeholder="联系电话" class="jion_msj_inpcon" /></li>
						<li><input type="text" placeholder="练习地址" class="jion_msj_inpcon" /></li>
						<li><input type="text" placeholder="电子邮箱" class="jion_msj_inpcon" /></li>
						<li class="possubmit">
							<a id="submita" class="submit"><img src="img/job/job_7.png" /></a>
						</li>
					</ul>
				</div>
				<div id="job_msj_scend3">
					<p>您的申请我们已收到</p>
					<p>请您静候佳音</p>
				</div>
			</div>

			<!--中间图部分-->
			<div id="woker_msj_scend2">
				<ul class="jrlist" data="off">
					<li class="jrli" data="雕刻">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_diaoke_02.jpg" />
							</div>
							<div class="backblock">
								<img src="img/woker/woker_diaoke_01.jpg" />
							</div>
						</div>
					</li>
					<li class="jrli" data="刺绣">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_cixiu_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_cixiu_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="绘画">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_huihua_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_huihua_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="布艺">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_buyi_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_buyi_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="木艺">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_muyi_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_muyi_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="皮艺">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_piyi_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_piyi_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="漆艺">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_qiyi_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_qiyi_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="铁艺">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_tieyi_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_tieyi_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="设计">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_sheji_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_sheji_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="书法">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/woker_shufa_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/woker_shufa_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="音律">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/yinlv_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/yinlv_01.jpg" /> </div>
						</div>
					</li>
					<li class="jrli" data="影像">
						<div class="frontback">
							<div class="frontblock">
								<img src="img/woker/yinxiang_02.jpg" /> </div>
							<div class="backblock">
								<img src="img/woker/yinxiang_01.jpg" /> </div>
						</div>
					</li>
				</ul>
			</div>

		</div>
		<script src="js/jquery1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			//			$("#a1").show("slow");
			$(function() {
				//判断浏览器是否支持placeholder属性
				supportPlaceholder = 'placeholder' in document.createElement('input');
				if(!supportPlaceholder) {
					//初始状态添加背景图片
					$("input").attr("class", "phbg"); //初始状态获得焦点
					$("input").focus;

					function destyle() {
						if($("input").val() != "") {
							$("input").removeClass("phbg");
						} else {
							$("input").attr("class", "phbg");
						}
					}
					//当输入框为空时，添加背景图片；有值时去掉背景图片
					destyle();

					$("input").keyup(function() { //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片
						destyle();
					});

					$("input").keydown(function() { //keydown事件可以在按键按下的第一时间去掉背景图片
						$("input").removeClass("phbg");
					});
				}
			});
			//中间图部分
			$(".frontblock").each(function() {
				$(this).mouseover(function() {
					$(this).stop(true).animate({
						opacity: 1
					}, 600).animate({
						opacity: 0
					}, 600)
				}).mouseout(function() {
					$(this).stop(true).animate({
						opacity: 1
					}, 600).animate({
						opacity: 0.9
					}, 600)
				});
			})
			//职位获取
			$('.jrli').click(function(){
				$("#woker_msj_zhiwei").html($(this).attr("data"))
			})
			//弹出动画
			$(".jrli").bind("click", function() {
				$("#woker_msj_scend1").animate({ left: '+0.1%' }, "slow");
			})
			$(".gaunbi").bind("click", function() {
				$("#woker_msj_scend1").animate({ left: '-100%' }, "slow");
			})
			$("#submita").bind("click", function() {
				$("#job_msj_scend3").show("slow").animate({
					height: 'toggle',
					opacity: 'toggle'
				}, 3000);
				$("input").val("");
			})
		</script>
	</body>

</html>